<script setup lang="ts">
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import {artGetChannelsService, artAddChannelsService, artUpdateChannelsService, artDeleteChannelsService} from '@/api/article.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const title = ref()
const dialogVisible = ref(false)

const categoryModel = ref({
  id: '',
  categoryName: '',
  categoryAlias: '',
})

const rules = {
  categoryName: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
  ],
  categoryAlias:[
    { required: true, message: '请输入分类别名', trigger: 'blur' },
  ],
}

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const tableData = ref([
  {
    id: '标题',
    categoryName: '时事',
    categoryAlias: '2016-05-03',
  },
])

async function articleCategoryList(){
  let result = await artGetChannelsService();
  console.log(result.data)
  tableData.value = result.data
}

articleCategoryList();

//添加文章分类，这个爆红没问题，编译器的问题
async function addCategory(){
  let result = await artAddChannelsService(categoryModel.value);
  ElMessage.success(result.message ? result.message : "添加成功");
  articleCategoryList();
  dialogVisible.value = false;
}

//编辑文章分类
function MyEdit(row){
  dialogVisible.value=true;
  title.value='编辑分类';
  categoryModel.value.categoryName = row.categoryName
  categoryModel.value.categoryAlias = row.categoryAlias
  categoryModel.value.id = row.id
}

//更新文章分类，这个爆红没问题，编译器的问题
async function updateCategory(){
  let result = await artUpdateChannelsService(categoryModel.value);
  ElMessage.success(result.message ? result.message : "编辑成功");
  articleCategoryList();
  dialogVisible.value = false;
}

//删除文章分类
const deleteData = (row) => {
  ElMessageBox.confirm(
      '你确定要删除吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        let result = await artDeleteChannelsService(row.id);
        ElMessage({
          type: 'success',
          message: ' 删除成功',
        })
        articleCategoryList();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}




//清空数据
function clearData(){
  categoryModel.value.categoryName='';
  categoryModel.value.categoryAlias='';
  categoryModel.value.id=''
}
</script>

<template>
  <el-card style="width: 1200px">
    <div class="card-header">
      <span>文章分类</span>
      <el-button type="primary" @click="dialogVisible=true;title='添加分类';clearData()">添加分类</el-button>
    </div>

    <div>
      <br>
      <hr>
      <br>
    </div>

<!--    <el-form :inline="true" class="demo-form-inline">-->
<!--      <el-form-item label="文章分类">-->
<!--        <el-select-->
<!--            v-model="formInline.date"-->
<!--            placeholder="请选择"-->
<!--            clearable-->
<!--        >-->
<!--          <el-option label="事实" value="事实" />-->
<!--          <el-option label="篮球" value="篮球" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="发布状态">-->
<!--        <el-select-->
<!--            v-model="formInline.region"-->
<!--            placeholder="请选择"-->
<!--            clearable-->
<!--        >-->
<!--          <el-option label="已发布" value="已发布" />-->
<!--          <el-option label="草稿" value="草稿" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="onSubmit">搜索</el-button>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="default" @click="onSubmit">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <br>
    <el-table :data="tableData" style="width: 1260px">
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="categoryName" label="分类名称" />
      <el-table-column prop="categoryAlias" label="分类别名" />
      <el-table-column label="操作" width="180px">
        <template #default="{row}">
          <el-button type="primary" :icon="Edit" circle @click="MyEdit(row)"/>
          <el-button type="danger" plain :icon="Delete" circle @click="deleteData(row)" />
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="30%"
    >
      <el-form
          :rules="rules"
          :model="categoryModel"
          label-width="100px"
          style="padding-right: 30px"
      >
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="categoryModel.categoryName"
              placeholder="请输入分类名称" minlength="1" maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="categoryAlias">
          <el-input v-model="categoryModel.categoryAlias"
              placeholder="请输入分类别名"minlength="1" maxlength="10"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="title==='添加分类'? addCategory() : updateCategory()"> 确认 </el-button>
      </span>
      </template>
    </el-dialog>

    <br>

    <el-pagination
        class="em-p"
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="jumper, total, sizes, prev, pager, next"
        :total="40"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
  <br>


</template>

<style lang="scss" scoped>
.em-p{
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.card-header{
  display: flex;
  justify-content: space-between;
}
</style>
